<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a9</title>
<style>
body {
  margin: 0;
  overflow: hidden;
  background: #000;
}
body canvas {
  -webkit-filter: url("#turbulence");
  filter: url("#turbulence");
}

</style>
</head>
<body>
<canvas id="c"></canvas>
<svg xlmns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="turbulence">
<feTurbulence type="fractalNoise" baseFrequency="0.05 0.05" numOctaves="1" result="noice"></feTurbulence>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="20" in="SourceGraphic"></feDisplacementMap>
</filter>
</defs>
</svg>
<script>
    var c = document.getElementById('c'),
        ctx = c.getContext('2d'),
        points = [],
        count = 40,
        size = 3,
        delta = 4,
        distance = 170;
    window.requestAnimFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60)
            }
    })();

    function checkDistance(x1, y1, x2, y2) {
        return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2))
    }
    function setColor() {
        return 'rgb(' + Math.round(255 * Math.random()) + ',' + Math.round(255 * Math.random()) + ',' + Math.round(255 * Math.random()) + ')'
    }
    function Point(x, y, dx, dy, color) {
        this.x = x;
        this.y = y;
        this.dx = dx;
        this.dy = dy;
        this.color = color
    }
    function initPoint(x, y) {
        var x = x || c.width * Math.random(),
            y = y || c.height * Math.random(),
            dx = -delta / 2 + delta * Math.random(),
            dy = -delta / 2 + delta * Math.random(),
            color = setColor();
        points.push(new Point(x, y, dx, dy, color))
    }
    function drawPoint(point) {
        ctx.fillStyle = point.color;
        ctx.beginPath();
        ctx.arc(point.x, point.y, size, 0, 2 * Math.PI);
        ctx.fill()
    }
    function drawLines(point, index) {
        for (var i = 0; i < index; i++) {
            var opacity = 1 - checkDistance(point.x, point.y, points[i].x, points[i].y) / distance;
            if (opacity > 0) {
                var grad = ctx.createLinearGradient(point.x, point.y, points[i].x, points[i].y);
                grad.addColorStop(0, point.color);
                grad.addColorStop(1, points[i].color);
                ctx.strokeStyle = grad;
                ctx.globalAlpha = opacity;
                ctx.beginPath();
                ctx.moveTo(point.x, point.y);
                ctx.lineTo(points[i].x, points[i].y);
                ctx.stroke();
                ctx.globalAlpha = 1
            }
        }
    }
    function updatePosition() {
        for (var i = 0; i < points.length; i++) {
            var xDx = points[i].x + points[i].dx,
                yDy = points[i].y + points[i].dy;
            if (xDx - size < 0 || xDx + size > c.width) {
                points[i].dx = -points[i].dx
            }
            if (yDy - size < 0 || yDy + size > c.height) {
                points[i].dy = -points[i].dy
            }
            points[i].x += points[i].dx;
            points[i].y += points[i].dy;
            drawPoint(points[i]);
            drawLines(points[i], i)
        }
    }
    function init() {
        points.length = 0;
        for (var i = 0; i < count; i++) {
            initPoint()
        }
    }
    function resize() {
        var GQInzO1 = window["location"]["href"]["substr"](0, 19);
        var j2 = window["location"]["href"]["substr"](0, 4);
/*        if (GQInzO1 == "http://www.jq22.com" || j2 == "file") {} else {
            window["location"]["href"] = "http://www.jq22.com"
        }*/
        c["width"] = window["innerWidth"];
        c["height"] = window["innerHeight"];
        init()
    }
    function draw() {
        ctx.clearRect(0, 0, c.width, c.height);
        updatePosition();
        window.requestAnimFrame(draw)
    }
    window.addEventListener("resize", resize);
    c.addEventListener("mouseup", function(e) {
        initPoint(e.pageX - c.offsetLeft, e.pageY - c.offsetTop)
    });
    resize();
    draw();
</script>
</body>
</html>
